<template>
	<div v-if="isLogin">
		<!-- 已登录 -->
		<div v-if="isLogin">
			<!-- 用户信息 -->
			<van-cell center class="member">
				<template #icon>
					<van-image :src="avatar" width="80px" round></van-image>
				</template>
				<template #title>
					<span class="title">{{user.name}}</span>
				</template>
			</van-cell>
			<!-- 用户课操作功能列表 -->
			<van-cell v-for="(item,i) of cellItems" :key="i" :icon="item.img" :title="item.title" is-link
				:to="{name:item.name}" />
			<van-cell @click="onClickLogout" icon="user-o" title="退出登录" is-link />
		</div>
	</div>
	<!-- 未登录 -->
	<div v-else>
		<van-cell class="member" center is-link to="/login">
			<template #icon>
				<van-image :src=" avatar_default" width="80px"></van-image>
			</template>
			<template #title>
				<span class="title">登录 / 注册</span>
			</template>
		</van-cell>
	</div>
</template>

<script>
	import {
		getTokenLocal,
		getUserLocal,
		removeTokenLocal
	} from "@/utils/auth.js"
	import {
		getDetailByIdAPI
	} from "@/api/user.js";
	export default {
		name: "user",
		data() {
			return {
				user: {},
				avatar_default: require("@/assets/images/avatar_default.png"), //默认头像
				isLogin: false,
				avatar: "",
				cellItems: [{
						title: "我的订单",
						name: "orderList",
						img: "orders-o",
					},
					{
						title: "收货地址",
						name: "addressList",
						img: "envelop-o",
					},
				 {
						title: "我的收藏",
						name: "collection",
						img: "point-gift-o",
					},
					{
						title: "个人资料",
						name: "profile",
						img: "user-o",
					},
					{
						title: "修改密码",
						name: "updatePwd",
						img: "records",
					},
				],
			};
		},
		mounted(){
			//初始页面数据
			this.user=getUserLocal();
			this.avatar=this.avatar_default;
			//判断是否用户登录，看Token是否为空
			let token=getTokenLocal();
			this.isLogin=token?true:false;
			if(this.isLogin){
				getDetailByIdAPI(this.user.id).then(result =>{
					this.avatar=this.APIDomainName+result.data.avatar;
				}).catch(()=>{});
			}
		},
		methods:{
			//点击用户退出事件
			onClickLogout(){
				removeTokenLocal();
				this.avatar=this.avatar_default;
				this.$toast("退出成功");
				this.isLogin=false;
			},
		},
	};
</script>

<style lang="less" scoped>
	.member {
		margin-top: 15px;
		padding: 10px;
		background: linear-gradient(90deg, #a3fa94,#fdf097);
		box-shadow: 0 0.1rem 0.25rem #fdf8d9;
	}



	.title {
		padding-left: 20px;
		font-size: 24px;
		color: #ffffff;
	}
</style>
